<template>
    <div class="user">
        <div class="buttonList" v-for="(item,index) in items">
            <div class="flexItem">
                <div class="button" @click="onGeneralClick(item.link||'/',item.queryParams|| null)">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'AddUser',
        components: {},
        data () {
            return {
                items: [{name: "指纹用户", link: '/addUserStep', queryParams: {step: 1}}, {
                    name: "密码用户",
                    link: '/addUserStep',
                    queryParams: {step: 4}
                }, {name: "刷卡用户", link: '/addUserStep', queryParams: {step: 7}}],
            }
        },
        created () {

        },
        methods: {
            onGeneralClick : function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            }
        }
    }
</script>

<style scoped>

    .user > .buttonList > .flexItem {
        width: 100vw;
        min-height: 8vh;
        margin-top: 8px;
        display: flex;
        justify-content: center;
        line-height: 8vh;
    }

    .user > .buttonList > .flexItem > .button {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }

    .user > .buttonList > .flexItem > .button:active {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_grep.png) no-repeat;
        color: orange;
        background-size: 100% 100%;
        align-self: center;
    }


</style>
